﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检修中心35kV线路故障定位工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.1.0/docx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        :root {
            --primary: #2c7873;
            --secondary: #6fb98f;
            --accent: #ff9a3c;
            --light: #f8f5f1;
            --dark: #004445;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(120deg, var(--primary), var(--dark));
            color: white;
            padding: 25px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }
        
        .tabs {
            display: flex;
            background: var(--light);
            border-bottom: 2px solid var(--secondary);
        }
        
        .tab {
            padding: 15px 30px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            position: relative;
        }
        
        .tab.active {
            background: white;
            color: var(--primary);
        }
        
        .tab.active::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--accent);
        }
        
        .tab:hover:not(.active) {
            background: rgba(111, 185, 143, 0.1);
        }
        
        .tab-content {
            padding: 30px;
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .section-title {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--secondary);
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
            background: var(--secondary);
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 25px;
            transition: transform 0.3s;
            border: 1px solid #eaeaea;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            font-size: 1.2rem;
            color: var(--dark);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            font-weight: 600;
        }
        
        .card-header i {
            margin-right: 10px;
            color: var(--accent);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        
        th {
            background: var(--primary);
            color: white;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
        }
        
        td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
        }
        
        tr:nth-child(even) {
            background: #f9f9f9;
        }
        
        tr:hover {
            background: #f1f9ff;
        }
        
        input, select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: var(--secondary);
            box-shadow: 0 0 0 3px rgba(111, 185, 143, 0.2);
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .btn {
            background: var(--accent);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn i {
            margin-right: 8px;
        }
        
        .btn:hover {
            background: #ff8a1c;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 154, 60, 0.3);
        }
        
        .btn-secondary {
            background: var(--primary);
        }
        
        .btn-secondary:hover {
            background: #215e59;
        }
        
        .btn-danger {
            background: #f44336;
        }
        
        .btn-danger:hover {
            background: #d32f2f;
        }
        
        .result-card {
            background: linear-gradient(135deg, #e8f4f8 0%, #d5e9f1 100%);
            border-left: 5px solid var(--accent);
        }
        
        .result-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            margin: 10px 0;
        }
        
        .result-label {
            font-weight: 600;
            color: var(--dark);
            margin-top: 20px;
        }
        
        .visualization {
            height: 300px;
            background: #f8fafc;
            border-radius: 10px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #cbd5e1;
        }
        
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .footer {
            text-align: center;
            padding: 25px;
            color: #666;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
            margin-top: 20px;
        }
        
        .history-table {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .recommendation {
            background: #fff9e6;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            border-left: 4px solid #ffc107;
        }
        
        .recommendation h3 {
            margin-bottom: 10px;
            color: #e6a700;
        }
        
        .status-indicator {
            display: inline-flex;
            align-items: center;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .status-normal {
            background: #e8f5e9;
            color: #2e7d32;
        }
        
        .status-warning {
            background: #fff8e1;
            color: #f57c00;
        }
        
        .status-critical {
            background: #ffebee;
            color: #d32f2f;
        }
        
        /* 新增样式 */
        .editing input {
            width: 90%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 8px;
            background: var(--primary);
            color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
        }
        
        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .notification.success {
            background: #4CAF50;
        }
        
        .notification.error {
            background: #f44336;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 1.5rem;
            color: var(--primary);
            font-weight: 600;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        
        .modal-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .report-download {
            background: #e3f2fd;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .report-info {
            display: flex;
            align-items: center;
        }
        
        .report-icon {
            font-size: 2rem;
            color: #2196f3;
            margin-right: 15px;
        }
        
        .report-details h3 {
            margin-bottom: 5px;
            color: #1976d2;
        }
        
        .report-details p {
            color: #555;
            font-size: 0.9rem;
        }
        
        .download-btn {
            background: #2196f3;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            transition: background 0.3s;
        }
        
        .download-btn:hover {
            background: #1976d2;
        }
        
        .download-btn i {
            margin-right: 8px;
        }
        
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
            
            header {
                padding: 20px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .tabs {
                flex-wrap: wrap;
            }
            
            .tab {
                padding: 12px 20px;
                flex: 1;
                text-align: center;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
            
            .report-download {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .report-download .download-btn {
                margin-top: 15px;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-solar-panel"></i> 检修中心技术监督组-35kV线路故障定位工具</h1>
            <p class="subtitle">智能辅助诊断 - 快速定位线路故障点-作者：巩帅帅</p>
        </header>
        
        <div class="tabs">
            <div class="tab active" data-tab="config">设备参数配置</div>
            <div class="tab" data-tab="topology">线路拓扑设置</div>
            <div class="tab" data-tab="fault">故障数据输入</div>
            <div class="tab" data-tab="result">故障定位结果</div>
            <div class="tab" data-tab="history">历史记录分析</div>
        </div>
        
        <!-- 设备参数配置 -->
        <div class="tab-content active" id="config">
            <div class="section-title">
                <i class="fas fa-cog"></i> 设备参数库配置
            </div>
            <p>设置场站内各类设备的电气参数，用于故障计算</p>
            
            <div class="grid">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-database"></i> 设备参数表
                    </div>
                    <table id="device-table">
                        <thead>
                            <tr>
                                <th>设备类型</th>
                                <th>型号</th>
                                <th>单位电阻(Ω/km)</th>
                                <th>单位电抗(Ω/km)</th>
                                <th>故障概率%</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="device-table-body">
                            <tr>
                                <td>电缆</td>
                                <td>YJLV-26/35</td>
                                <td>0.125</td>
                                <td>0.08</td>
                                <td>0.8</td>
                                <td>
                                    <button class="btn btn-secondary edit-device"><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-danger delete-device"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>架空线</td>
                                <td>LGJ-240</td>
                                <td>0.21</td>
                                <td>0.32</td>
                                <td>1.2</td>
                                <td>
                                    <button class="btn btn-secondary edit-device"><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-danger delete-device"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>箱变</td>
                                <td>SCB11-2500</td>
                                <td>0.05</td>
                                <td>0.18</td>
                                <td>0.5</td>
                                <td>
                                    <button class="btn btn-secondary edit-device"><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-danger delete-device"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>逆变器</td>
                                <td>315kW</td>
                                <td>0.03</td>
                                <td>0.05</td>
                                <td>0.3</td>
                                <td>
                                    <button class="btn btn-secondary edit-device"><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-danger delete-device"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>T接箱</td>
                                <td>标准型</td>
                                <td>0.002</td>
                                <td>0.001</td>
                                <td>0.1</td>
                                <td>
                                    <button class="btn btn-secondary edit-device"><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-danger delete-device"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="action-buttons">
                        <button class="btn" id="add-device-btn"><i class="fas fa-plus"></i> 添加设备</button>
                        <button class="btn btn-secondary" id="save-device-btn"><i class="fas fa-save"></i> 保存参数</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-info-circle"></i> 设备参数说明
                    </div>
                    <p>正确配置设备参数是准确故障定位的基础：</p>
                    <ul style="padding: 15px 30px; color: #555;">
                        <li>单位电阻：设备每公里电阻值(Ω/km)</li>
                        <li>单位电抗：设备每公里电抗值(Ω/km)</li>
                        <li>故障概率：设备历史故障统计概率</li>
                        <li>电缆：通常电阻值在0.1-0.15Ω/km范围</li>
                        <li>架空线：电阻值在0.2-0.25Ω/km范围</li>
                        <li>箱变：阻抗值相对固定，随容量变化</li>
                    </ul>
                    <div class="recommendation">
                        <h3><i class="fas fa-lightbulb"></i> 使用建议</h3>
                        <p>1. 优先使用设备铭牌参数或出厂报告数据</p>
                        <p>2. 定期更新设备参数，特别是设备更换后</p>
                        <p>3. 对于老旧设备可适当提高故障概率值</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 线路拓扑设置 -->
        <div class="tab-content" id="topology">
            <div class="section-title">
                <i class="fas fa-project-diagram"></i> 线路拓扑配置
            </div>
            <p>设置场站内线路连接关系，支持复杂拓扑结构</p>
            
            <div class="grid">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-plug"></i> 线路拓扑设置
                    </div>
                    
                    <div class="input-group">
                        <label>线路名称</label>
                        <input type="text" value="主线路1" id="line-name">
                    </div>
                    
                    <table>
                        <thead>
                            <tr>
                                <th>起点设备</th>
                                <th>终点设备</th>
                                <th>线路类型</th>
                                <th>长度(km)</th>
                                <th>并联数量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="line-table-body">
                            <tr>
                                <td>升压站</td>
                                <td>T接点1</td>
                                <td>
                                    <select>
                                        <option>电缆</option>
                                        <option selected>架空线</option>
                                        <option>箱变</option>
                                        <option>逆变器</option>
                                    </select>
                                </td>
                                <td><input type="number" value="2.3"></td>
                                <td><input type="number" value="1"></td>
                                <td><button class="btn btn-secondary remove-line"><i class="fas fa-trash"></i></button></td>
                            </tr>
                            <tr>
                                <td>T接点1</td>
                                <td>箱变A1</td>
                                <td>
                                    <select>
                                        <option selected>电缆</option>
                                        <option>架空线</option>
                                        <option>箱变</option>
                                        <option>逆变器</option>
                                    </select>
                                </td>
                                <td><input type="number" value="0.8"></td>
                                <td><input type="number" value="2"></td>
                                <td><button class="btn btn-secondary remove-line"><i class="fas fa-trash"></i></button></td>
                            </tr>
                            <tr>
                                <td>T接点1</td>
                                <td>箱变B1</td>
                                <td>
                                    <select>
                                        <option selected>电缆</option>
                                        <option>架空线</option>
                                        <option>箱变</option>
                                        <option>逆变器</option>
                                    </select>
                                </td>
                                <td><input type="number" value="1.2"></td>
                                <td><input type="number" value="1"></td>
                                <td><button class="btn btn-secondary remove-line"><i class="fas fa-trash"></i></button></td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="action-buttons">
                        <button class="btn" id="add-line-btn"><i class="fas fa-plus"></i> 添加线路段</button>
                        <button class="btn" id="add-branch-btn"><i class="fas fa-code-branch"></i> 添加分支点</button>
                        <button class="btn btn-secondary" id="save-topology-btn"><i class="fas fa-save"></i> 保存拓扑</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-map-marked-alt"></i> 线路拓扑图
                    </div>
                    <div class="visualization">
                        <div style="text-align: center;">
                            <div style="font-size: 3rem; color: var(--accent);">
                                <i class="fas fa-project-diagram"></i>
                            </div>
                            <p style="margin-top: 15px; font-weight: 500;">线路拓扑可视化</p>
                            <p style="color: #666; margin-top: 5px;">升压站 → 架空线(2.3km) → T接点1</p>
                            <p style="color: #666;">├→ 电缆(0.8km×2) → 箱变A1</p>
                            <p style="color: #666;">└→ 电缆(1.2km) → 箱变B1</p>
                        </div>
                    </div>
                    
                    <div class="result-label">拓扑状态</div>
                    <div class="status-indicator status-normal">
                        <i class="fas fa-check-circle"></i> 拓扑结构完整
                    </div>
                    
                    <div class="result-label">总线路长度</div>
                    <div class="result-value">4.3 km</div>
                    
                    <div class="result-label">等效阻抗</div>
                    <div class="result-value">0.84 Ω</div>
                </div>
            </div>
        </div>
        
        <!-- 故障数据输入 -->
        <div class="tab-content" id="fault">
            <div class="section-title">
                <i class="fas fa-bolt"></i> 故障数据输入
            </div>
            <p>输入故障时的电气参数，系统将自动计算故障位置</p>
            
            <div class="grid">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-exclamation-triangle"></i> 故障特征输入
                    </div>
                    
                    <div class="input-group">
                        <label>故障线路</label>
                        <select id="fault-line">
                            <option>请选择线路</option>
                            <option selected>主线路1</option>
                            <option>主线路2</option>
                            <option>分支线路A</option>
                        </select>
                    </div>
                    
                    <div class="input-group">
                        <label>故障相别</label>
                        <select id="fault-phase">
                            <option>A相</option>
                            <option>B相</option>
                            <option selected>C相</option>
                            <option>AB相</option>
                            <option>BC相</option>
                            <option>CA相</option>
                            <option>三相</option>
                        </select>
                    </div>
                    
                    <div class="input-group">
                        <label>故障电流(kA)</label>
                        <input type="number" id="fault-current" value="5.6">
                    </div>
                    
                    <div class="input-group">
                        <label>零序电流(A)</label>
                        <input type="number" id="zero-current" value="380">
                    </div>
                    
                    <div class="input-group">
                        <label>始端电压(kV)</label>
                        <input type="number" id="start-voltage" value="22.4">
                    </div>
                    
                    <div class="input-group">
                        <label>故障发生时间</label>
                        <input type="datetime-local" id="fault-time" value="2023-08-15T14:30">
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn" onclick="calculateFault()">
                            <i class="fas fa-calculator"></i> 计算故障位置
                        </button>
                        <button class="btn btn-secondary" onclick="resetFaultForm()">
                            <i class="fas fa-redo"></i> 重置数据
                        </button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-file-medical-alt"></i> 故障类型分析
                    </div>
                    
                    <div class="input-group">
                        <label>根据输入数据判断的故障类型</label>
                        <div class="result-value" style="color: #d32f2f;" id="fault-type-display">C相高阻接地</div>
                    </div>
                    
                    <div class="input-group">
                        <label>故障特征分析</label>
                        <ul style="padding: 15px 30px; color: #555;" id="fault-analysis">
                            <li>零序电流存在且较大：380A > 100A</li>
                            <li>C相电压接近0：0.2kV</li>
                            <li>故障电流中等：5.6kA</li>
                            <li>符合高阻接地故障特征</li>
                        </ul>
                    </div>
                    
                    <div class="recommendation">
                        <h3><i class="fas fa-stethoscope"></i> 初步诊断</h3>
                        <p>1. 可能为C相绝缘损坏导致接地</p>
                        <p>2. 可能为电缆头或连接处老化</p>
                        <p>3. 建议优先检查电缆中间接头和终端头</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 故障定位结果 -->
        <div class="tab-content" id="result">
            <div class="section-title">
                <i class="fas fa-map-marker-alt"></i> 故障定位结果
            </div>
            
            <div class="grid">
                <div class="card result-card">
                    <div class="card-header">
                        <i class="fas fa-bullseye"></i> 故障定位结果
                    </div>
                    
                    <div class="result-label">故障距离</div>
                    <div class="result-value">2.35 km</div>
                    
                    <div class="result-label">故障设备</div>
                    <div class="result-value">箱变B07高压侧接头</div>
                    
                    <div class="result-label">故障概率</div>
                    <div class="result-value">85%</div>
                    
                    <div class="result-label">可能原因</div>
                    <p style="padding: 10px 15px; background: #fff; border-radius: 8px; margin-top: 10px;">
                        绝缘劣化（依据：三年未做预防性试验，湿度>80%环境运行）
                    </p>
                    
                    <div class="action-buttons">
                        <button class="btn" id="generate-report-btn">
                            <i class="fas fa-file-pdf"></i> 生成报告
                        </button>
                        <button class="btn btn-secondary" id="save-record-btn">
                            <i class="fas fa-history"></i> 保存记录
                        </button>
                    </div>
                    
                    <!-- 报告下载区域 -->
                    <div id="report-container" style="display: none;">
                        <div class="report-download">
                            <div class="report-info">
                                <div class="report-icon">
                                    <i class="fas fa-file-word"></i>
                                </div>
                                <div class="report-details">
                                    <h3>故障分析报告已生成</h3>
                                    <p>主线路1故障报告_20230815.docx - 下载大小约 85KB</p>
                                </div>
                            </div>
                            <button class="download-btn" id="download-report-btn">
                                <i class="fas fa-download"></i> 下载Word报告
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-map"></i> 故障位置示意图
                    </div>
                    <div class="visualization">
                        <canvas id="location-map"></canvas>
                    </div>
                    
                    <div class="result-label">故障点位置描述</div>
                    <p style="padding: 10px 15px; background: #f8f9fa; border-radius: 8px;">
                        从升压站沿主线路1向东北方向2.35公里处，位于箱变B07高压侧电缆接头处。
                        参考坐标：28.12345°N, 112.67890°E
                    </p>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-tools"></i> 处置建议
                    </div>
                    
                    <div class="recommendation">
                        <h3><i class="fas fa-list-ol"></i> 检修步骤</h3>
                        <p>1. 立即隔离主线路1</p>
                        <p>2. 重点检查箱变B07高压侧接头</p>
                        <p>3. 使用2500V摇表测量C相绝缘电阻</p>
                        <p>4. 检查应力锥是否移位或破损</p>
                        <p>5. 红外检测2.2-2.5km区段电缆</p>
                    </div>
                    
                    <div class="recommendation">
                        <h3><i class="fas fa-shield-alt"></i> 安全措施</h3>
                        <p>1. 确认线路完全断电并接地</p>
                        <p>2. 穿戴全套绝缘防护装备</p>
                        <p>3. 现场设置安全围栏和警示标志</p>
                        <p>4. 两人以上协同作业</p>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn">
                            <i class="fas fa-tasks"></i> 创建检修工单
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 历史记录分析 -->
        <div class="tab-content" id="history">
            <div class="section-title">
                <i class="fas fa-chart-line"></i> 历史故障记录分析
            </div>
            
            <div class="grid">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-history"></i> 历史故障记录
                    </div>
                    
                    <div class="history-table">
                        <table>
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>线路</th>
                                    <th>故障类型</th>
                                    <th>定位距离</th>
                                    <th>实际原因</th>
                                    <th>处理时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2023-08-10 14:30</td>
                                    <td>主线路1</td>
                                    <td>C相接地</td>
                                    <td>2.35km</td>
                                    <td>电缆头击穿</td>
                                    <td>2.5小时</td>
                                </tr>
                                <tr>
                                    <td>2023-07-22 09:15</td>
                                    <td>分支线路A</td>
                                    <td>AB相短路</td>
                                    <td>1.82km</td>
                                    <td>动物触碰</td>
                                    <td>3.2小时</td>
                                </tr>
                                <tr>
                                    <td>2023-06-05 16:40</td>
                                    <td>主线路2</td>
                                    <td>B相接地</td>
                                    <td>3.15km</td>
                                    <td>绝缘子污闪</td>
                                    <td>4.1小时</td>
                                </tr>
                                <tr>
                                    <td>2023-05-18 11:20</td>
                                    <td>分支线路C</td>
                                    <td>断线故障</td>
                                    <td>0.95km</td>
                                    <td>施工损坏</td>
                                    <td>5.0小时</td>
                                </tr>
                                <tr>
                                    <td>2023-04-02 13:50</td>
                                    <td>主线路1</td>
                                    <td>C相接地</td>
                                    <td>1.75km</td>
                                    <td>避雷器失效</td>
                                    <td>2.8小时</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn">
                            <i class="fas fa-download"></i> 导出历史数据
                        </button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-pie"></i> 故障类型分布
                    </div>
                    <div class="visualization">
                        <canvas id="fault-type-chart"></canvas>
                    </div>
                    
                    <div class="result-label">主要故障类型</div>
                    <p style="padding: 10px 15px; background: #f8f9fa; border-radius: 8px;">
                        单相接地(65%) > 相间短路(20%) > 断线故障(10%) > 其他(5%)
                    </p>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-bar"></i> 设备故障统计
                    </div>
                    <div class="visualization">
                        <canvas id="device-fault-chart"></canvas>
                    </div>
                    
                    <div class="result-label">故障率最高设备</div>
                    <p style="padding: 10px 15px; background: #f8f9fa; border-radius: 8px;">
                        1. 电缆接头(42%) 2. 箱变(28%) 3. 架空线绝缘子(15%) 
                    </p>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>光伏场站35kV线路故障定位工具 v2.0 | 基于电力系统行波定位原理</p>
            <p>© 2023 新能源智能运维解决方案 | 数据仅存储于本地浏览器</p>
        </div>
    </div>

    <!-- 设备编辑模态框 -->
    <div class="modal" id="device-modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="modal-title">添加新设备</div>
                <button class="close-modal">&times;</button>
            </div>
            <div class="form-group">
                <label>设备类型</label>
                <select id="device-type">
                    <option value="电缆">电缆</option>
                    <option value="架空线">架空线</option>
                    <option value="箱变">箱变</option>
                    <option value="逆变器">逆变器</option>
                    <option value="T接箱">T接箱</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label>型号</label>
                <input type="text" id="device-model" placeholder="例如: YJLV-26/35">
            </div>
            <div class="form-group">
                <label>单位电阻(Ω/km)</label>
                <input type="number" id="device-resistance" step="0.001" placeholder="例如: 0.125">
            </div>
            <div class="form-group">
                <label>单位电抗(Ω/km)</label>
                <input type="number" id="device-reactance" step="0.001" placeholder="例如: 0.08">
            </div>
            <div class="form-group">
                <label>故障概率(%)</label>
                <input type="number" id="device-failure-rate" step="0.1" min="0" max="100" placeholder="例如: 0.8">
            </div>
            <div class="modal-buttons">
                <button class="btn" id="save-device-modal">保存</button>
                <button class="btn btn-secondary close-modal">取消</button>
            </div>
        </div>
    </div>

    <!-- 通知消息 -->
    <div class="notification" id="notification"></div>

    <script>
        // 设备数据存储
        let deviceData = [
            { type: "电缆", model: "YJLV-26/35", resistance: 0.125, reactance: 0.08, failureRate: 0.8 },
            { type: "架空线", model: "LGJ-240", resistance: 0.21, reactance: 0.32, failureRate: 1.2 },
            { type: "箱变", model: "SCB11-2500", resistance: 0.05, reactance: 0.18, failureRate: 0.5 },
            { type: "逆变器", model: "315kW", resistance: 0.03, reactance: 0.05, failureRate: 0.3 },
            { type: "T接箱", model: "标准型", resistance: 0.002, reactance: 0.001, failureRate: 0.1 }
        ];
        
        // 当前编辑的设备行索引
        let currentEditingRow = null;
        
        // 标签切换功能
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有active类
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                
                // 添加active类到当前标签
                tab.classList.add('active');
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
                
                // 如果是结果页，渲染图表
                if(tabId === 'result') {
                    renderLocationMap();
                }
                if(tabId === 'history') {
                    renderCharts();
                }
            });
        });
        
        // 渲染故障定位图
        function renderLocationMap() {
            const ctx = document.getElementById('location-map').getContext('2d');
            
            // 清除现有图表
            if(window.locationChart) {
                window.locationChart.destroy();
            }
            
            window.locationChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['0.0', '0.5', '1.0', '1.5', '2.0', '2.5', '3.0'],
                    datasets: [{
                        label: '线路阻抗曲线',
                        data: [0, 0.2, 0.4, 0.6, 0.8, 1.1, 1.3],
                        borderColor: '#2c7873',
                        backgroundColor: 'rgba(44, 120, 115, 0.1)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: '故障点',
                        data: [null, null, null, null, null, 1.1, null],
                        pointBackgroundColor: '#ff6b6b',
                        pointRadius: 8,
                        pointHoverRadius: 10,
                        showLine: false
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: '故障点位置示意图 (2.35km处)'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    if(context.datasetIndex === 1) {
                                        return '故障点: 2.35km';
                                    }
                                    return `阻抗: ${context.parsed.y}Ω`;
                                }
                            }
                        },
                        annotation: {
                            annotations: {
                                line1: {
                                    type: 'line',
                                    mode: 'vertical',
                                    scaleID: 'x',
                                    value: 5,
                                    borderColor: '#ff6b6b',
                                    borderWidth: 2,
                                    borderDash: [5, 5],
                                    label: {
                                        display: true,
                                        content: '故障点',
                                        position: 'top'
                                    }
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: '阻抗 (Ω)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '距离 (km)'
                            }
                        }
                    }
                }
            });
        }
        
        // 渲染统计图表
        function renderCharts() {
            // 故障类型分布图
            const typeCtx = document.getElementById('fault-type-chart').getContext('2d');
            if(window.typeChart) window.typeChart.destroy();
            window.typeChart = new Chart(typeCtx, {
                type: 'doughnut',
                data: {
                    labels: ['单相接地', '相间短路', '断线故障', '其他'],
                    datasets: [{
                        data: [65, 20, 10, 5],
                        backgroundColor: [
                            '#2c7873',
                            '#6fb98f',
                            '#ff9a3c',
                            '#ff6b6b'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right'
                        },
                        title: {
                            display: true,
                            text: '故障类型分布'
                        }
                    }
                }
            });
            
            // 设备故障统计图
            const deviceCtx = document.getElementById('device-fault-chart').getContext('2d');
            if(window.deviceChart) window.deviceChart.destroy();
            window.deviceChart = new Chart(deviceCtx, {
                type: 'bar',
                data: {
                    labels: ['电缆接头', '箱变', '绝缘子', '逆变器', '其他'],
                    datasets: [{
                        label: '故障率(%)',
                        data: [42, 28, 15, 8, 7],
                        backgroundColor: '#ff9a3c'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: '设备故障率统计'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 50,
                            title: {
                                display: true,
                                text: '故障率(%)'
                            }
                        }
                    }
                }
            });
        }
        
        // 故障计算函数
        function calculateFault() {
            // 获取输入值
            const line = document.getElementById('fault-line').value;
            const phase = document.getElementById('fault-phase').value;
            const current = document.getElementById('fault-current').value;
            const zeroCurrent = document.getElementById('zero-current').value;
            const voltage = document.getElementById('start-voltage').value;
            const time = document.getElementById('fault-time').value;
            
            if (!line || !phase || !current || !zeroCurrent || !voltage || !time) {
                showNotification('请填写所有故障数据', 'error');
                return;
            }
            
            // 这里应该是实际计算逻辑，此处模拟计算结果
            showNotification('故障位置计算完成！', 'success');
            document.querySelector('[data-tab="result"]').click();
        }
        
        // 重置故障表单
        function resetFaultForm() {
            document.getElementById('fault-line').value = '主线路1';
            document.getElementById('fault-phase').value = 'C相';
            document.getElementById('fault-current').value = '';
            document.getElementById('zero-current').value = '';
            document.getElementById('start-voltage').value = '';
            document.getElementById('fault-time').value = '';
            showNotification('表单已重置', 'success');
        }
        
        // 显示通知
        function showNotification(message, type) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.className = 'notification ' + type;
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // 渲染设备表格
        function renderDeviceTable() {
            const tbody = document.getElementById('device-table-body');
            tbody.innerHTML = '';
            
            deviceData.forEach((device, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${device.type}</td>
                    <td>${device.model}</td>
                    <td>${device.resistance}</td>
                    <td>${device.reactance}</td>
                    <td>${device.failureRate}</td>
                    <td>
                        <button class="btn btn-secondary edit-device"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-danger delete-device"><i class="fas fa-trash"></i></button>
                    </td>
                `;
                
                // 绑定编辑事件
                row.querySelector('.edit-device').addEventListener('click', () => {
                    editDevice(index);
                });
                
                // 绑定删除事件
                row.querySelector('.delete-device').addEventListener('click', () => {
                    deleteDevice(index);
                });
                
                tbody.appendChild(row);
            });
        }
        
        // 编辑设备
        function editDevice(index) {
            const device = deviceData[index];
            document.getElementById('modal-title').textContent = '编辑设备参数';
            document.getElementById('device-type').value = device.type;
            document.getElementById('device-model').value = device.model;
            document.getElementById('device-resistance').value = device.resistance;
            document.getElementById('device-reactance').value = device.reactance;
            document.getElementById('device-failure-rate').value = device.failureRate;
            
            currentEditingRow = index;
            document.getElementById('device-modal').style.display = 'flex';
        }
        
        // 删除设备
        function deleteDevice(index) {
            if (confirm('确定要删除此设备参数吗？')) {
                deviceData.splice(index, 1);
                renderDeviceTable();
                showNotification('设备参数已删除', 'success');
            }
        }
        
        // 保存设备
        function saveDevice() {
            const type = document.getElementById('device-type').value;
            const model = document.getElementById('device-model').value;
            const resistance = document.getElementById('device-resistance').value;
            const reactance = document.getElementById('device-reactance').value;
            const failureRate = document.getElementById('device-failure-rate').value;
            
            if (!type || !model || !resistance || !reactance || !failureRate) {
                showNotification('请填写所有设备参数', 'error');
                return;
            }
            
            const newDevice = {
                type,
                model,
                resistance: parseFloat(resistance),
                reactance: parseFloat(reactance),
                failureRate: parseFloat(failureRate)
            };
            
            if (currentEditingRow !== null) {
                // 更新现有设备
                deviceData[currentEditingRow] = newDevice;
                showNotification('设备参数已更新', 'success');
            } else {
                // 添加新设备
                deviceData.push(newDevice);
                showNotification('设备已添加', 'success');
            }
            
            renderDeviceTable();
            document.getElementById('device-modal').style.display = 'none';
            currentEditingRow = null;
        }
        
        // 生成Word报告
        function generateReport() {
            // 模拟生成报告的过程
            showNotification('正在生成故障报告...', 'success');
            
            // 模拟延迟
            setTimeout(() => {
                document.getElementById('report-container').style.display = 'block';
                showNotification('故障报告已生成！', 'success');
            }, 1500);
        }
        
        // 下载Word报告
        function downloadReport() {
            // 创建报告内容
            const reportContent = `
                <html xmlns:o='urn:schemas-microsoft-com:office:office' 
                      xmlns:w='urn:schemas-microsoft-com:office:word' 
                      xmlns='http://www.w3.org/TR/REC-html40'>
                <head>
                    <meta charset="utf-8">
                    <title>35kV线路故障分析报告</title>
                    <style>
                        body { font-family: "Microsoft YaHei", sans-serif; }
                        h1 { color: #2c7873; text-align: center; }
                        h2 { color: #004445; border-bottom: 1px solid #6fb98f; padding-bottom: 5px; }
                        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
                        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                        th { background-color: #f2f2f2; }
                        .section { margin-bottom: 25px; }
                    </style>
                </head>
                <body>
                    <h1>35kV线路故障分析报告</h1>
                    <p style="text-align: center; color: #666;">报告编号: FL-20230815-001</p>
                    
                    <div class="section">
                        <h2>故障基本信息</h2>
                        <table>
                            <tr>
                                <th>故障线路</th>
                                <td>主线路1</td>
                                <th>故障发生时间</th>
                                <td>2023-08-15 14:30</td>
                            </tr>
                            <tr>
                                <th>故障类型</th>
                                <td>C相高阻接地</td>
                                <th>故障距离</th>
                                <td>2.35 km</td>
                            </tr>
                            <tr>
                                <th>故障设备</th>
                                <td colspan="3">箱变B07高压侧接头</td>
                            </tr>
                        </table>
                    </div>
                    
                    <div class="section">
                        <h2>故障特征数据</h2>
                        <table>
                            <tr>
                                <th>故障电流</th>
                                <td>5.6 kA</td>
                                <th>零序电流</th>
                                <td>380 A</td>
                            </tr>
                            <tr>
                                <th>始端电压</th>
                                <td>22.4 kV</td>
                                <th>环境温度</th>
                                <td>28°C</td>
                            </tr>
                            <tr>
                                <th>环境湿度</th>
                                <td>85%</td>
                                <th>天气情况</th>
                                <td>小雨</td>
                            </tr>
                        </table>
                    </div>
                    
                    <div class="section">
                        <h2>故障定位分析</h2>
                        <p>根据行波定位原理及设备参数模型分析，确定故障点位于主线路1距升压站2.35公里处，具体位置为箱变B07高压侧电缆接头处。</p>
                        <p>故障点坐标：28.12345°N, 112.67890°E</p>
                        <p><strong>故障概率：</strong> 85%</p>
                        <p><strong>可能原因：</strong> 绝缘劣化（依据：三年未做预防性试验，湿度>80%环境运行）</p>
                    </div>
                    
                    <div class="section">
                        <h2>处置建议</h2>
                        <h3>检修步骤：</h3>
                        <ol>
                            <li>立即隔离主线路1</li>
                            <li>重点检查箱变B07高压侧接头</li>
                            <li>使用2500V摇表测量C相绝缘电阻</li>
                            <li>检查应力锥是否移位或破损</li>
                            <li>红外检测2.2-2.5km区段电缆</li>
                        </ol>
                        
                        <h3>安全措施：</h3>
                        <ul>
                            <li>确认线路完全断电并接地</li>
                            <li>穿戴全套绝缘防护装备</li>
                            <li>现场设置安全围栏和警示标志</li>
                            <li>两人以上协同作业</li>
                        </ul>
                    </div>
                    
                    <div class="section">
                        <h2>参与设备参数</h2>
                        <table>
                            <tr>
                                <th>设备类型</th>
                                <th>型号</th>
                                <th>单位电阻</th>
                                <th>单位电抗</th>
                            </tr>
                            <tr>
                                <td>电缆</td>
                                <td>YJLV-26/35</td>
                                <td>0.125 Ω/km</td>
                                <td>0.08 Ω/km</td>
                            </tr>
                            <tr>
                                <td>架空线</td>
                                <td>LGJ-240</td>
                                <td>0.21 Ω/km</td>
                                <td>0.32 Ω/km</td>
                            </tr>
                            <tr>
                                <td>箱变</td>
                                <td>SCB11-2500</td>
                                <td>0.05 Ω/km</td>
                                <td>0.18 Ω/km</td>
                            </tr>
                        </table>
                    </div>
                    
                    <div style="margin-top: 40px; text-align: right;">
                        <p>报告生成时间: ${new Date().toLocaleString()}</p>
                        <p>分析人员: 巩帅帅</p>
                        <p>检修中心技术监督组</p>
                    </div>
                </body>
                </html>
            `;
            
            // 创建Blob对象
            const blob = new Blob([reportContent], {type: 'application/msword'});
            
            // 创建下载链接
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `主线路1故障报告_${new Date().toISOString().slice(0,10)}.doc`;
            
            // 触发下载
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            showNotification('报告下载已开始', 'success');
        }
        
        // 设备管理功能
        function setupDeviceManagement() {
            // 添加设备按钮
            document.getElementById('add-device-btn').addEventListener('click', () => {
                document.getElementById('modal-title').textContent = '添加新设备';
                document.getElementById('device-modal').style.display = 'flex';
                document.getElementById('device-type').value = '电缆';
                document.getElementById('device-model').value = '';
                document.getElementById('device-resistance').value = '';
                document.getElementById('device-reactance').value = '';
                document.getElementById('device-failure-rate').value = '';
                currentEditingRow = null;
            });
            
            // 保存设备参数
            document.getElementById('save-device-btn').addEventListener('click', () => {
                showNotification('设备参数已保存！', 'success');
            });
            
            // 保存设备模态框按钮
            document.getElementById('save-device-modal').addEventListener('click', saveDevice);
            
            // 关闭模态框
            document.querySelectorAll('.close-modal').forEach(btn => {
                btn.addEventListener('click', () => {
                    document.getElementById('device-modal').style.display = 'none';
                    currentEditingRow = null;
                });
            });
        }
        
        // 线路拓扑管理功能
        function setupTopologyManagement() {
            // 添加线路段
            document.getElementById('add-line-btn').addEventListener('click', () => {
                const tbody = document.getElementById('line-table-body');
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td><input type="text" placeholder="起点设备"></td>
                    <td><input type="text" placeholder="终点设备"></td>
                    <td>
                        <select>
                            <option>电缆</option>
                            <option>架空线</option>
                            <option>箱变</option>
                            <option>逆变器</option>
                        </select>
                    </td>
                    <td><input type="number" placeholder="长度"></td>
                    <td><input type="number" value="1" min="1"></td>
                    <td><button class="btn btn-secondary remove-line"><i class="fas fa-trash"></i></button></td>
                `;
                tbody.appendChild(newRow);
                setupRemoveLineButtons();
                showNotification('线路段已添加', 'success');
            });
            
            // 添加分支点
            document.getElementById('add-branch-btn').addEventListener('click', () => {
                const tbody = document.getElementById('line-table-body');
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td><input type="text" value="T接点1"></td>
                    <td><input type="text" placeholder="新分支点"></td>
                    <td>
                        <select>
                            <option>电缆</option>
                            <option>架空线</option>
                            <option>箱变</option>
                            <option>逆变器</option>
                        </select>
                    </td>
                    <td><input type="number" placeholder="长度"></td>
                    <td><input type="number" value="1" min="1"></td>
                    <td><button class="btn btn-secondary remove-line"><i class="fas fa-trash"></i></button></td>
                `;
                tbody.appendChild(newRow);
                setupRemoveLineButtons();
                showNotification('分支点已添加', 'success');
            });
            
            // 保存拓扑
            document.getElementById('save-topology-btn').addEventListener('click', () => {
                const lineName = document.getElementById('line-name').value;
                if (!lineName) {
                    showNotification('请填写线路名称', 'error');
                    return;
                }
                
                showNotification('线路拓扑已保存！', 'success');
            });
            
            // 设置删除按钮
            function setupRemoveLineButtons() {
                document.querySelectorAll('.remove-line').forEach(btn => {
                    btn.addEventListener('click', function() {
                        this.closest('tr').remove();
                        showNotification('线路段已删除', 'success');
                    });
                });
            }
            
            // 初始化删除按钮
            setupRemoveLineButtons();
        }
        
        // 初始化页面时渲染图表和绑定事件
        window.onload = function() {
            renderDeviceTable();
            renderLocationMap();
            renderCharts();
            setupDeviceManagement();
            setupTopologyManagement();
            
            // 绑定生成报告按钮
            document.getElementById('generate-report-btn').addEventListener('click', generateReport);
            
            // 绑定下载报告按钮
            document.getElementById('download-report-btn').addEventListener('click', downloadReport);
            
            // 绑定保存记录按钮
            document.getElementById('save-record-btn').addEventListener('click', () => {
                showNotification('故障记录已保存！', 'success');
            });
        };
    </script>
</body>
</html>